<template>
  <!--数据统计-->
  <div class="base-container overviewManagement">
    <el-row gutter="10">
      <el-col :span="4">
        <!--项目查询 分享能耗    -->
        <TreeMenu ref="communityTree" @handleNodeClick="handleNodeClick" @selTreeList="handleNodeClick"/>
      </el-col>
      <el-col :span="20">
        <div class="MessagePanel">
          <!-- 统计点设备显示    -->
          <div class="topButton">
            <div class="name">
              <p class="classNme">数据查询</p>
              <p class="smallClassName">DATA INFOMATION QUERY</P>
            </div>
          </div>
          <div class="line"></div>
          <div class="dataShowView">
            <statistics-table-panel ref="statistics_table_panel" :localStorageName="'range'"/>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import StatisticsTablePanel from "@/views/subitem/components/StatisticsTablePanel.vue";
import TreeMenu from '../../components/CommunityTree.vue';

let component;
export default {
  name: "StatisticsManagement",
  components: {StatisticsTablePanel, TreeMenu},
  methods: {
    async handleNodeClick(val) {
      let queryIds = [];
      queryIds.push(val.rangeId)
      let childrenIds = await component.getChildrenId(val.children);
      queryIds = queryIds.concat(childrenIds);
      //设置区域id
      component.setSelRanges(queryIds, val.rangeId);
    },
    async getChildrenId(list) {
      let childrenIds = [];
      for (let range of list) {
        childrenIds.push(range.rangeId);
        if (range.children && range.children.length > 0) {
          let rangeChildrenIds = await component.getChildrenId(range.children);
          childrenIds = childrenIds.concat(rangeChildrenIds);
        }
      }
      return childrenIds;
    },
    setSelRanges(queryIds, rangeId) {
      component.rangeIds = queryIds;
      component.rangeId = rangeId;
      component.queryAction();
    },
    queryAction(){

    }
  },
  mounted() {
    component = this;
    component.$refs.communityTree.selTreeList({actionType: "deviceTreeBySelf", route: "device"});
  }
}
</script>

<style scoped>

</style>